<template>
  <div class="index">

      <router-view />


    <van-tabbar v-model="active" route>
      <van-tabbar-item v-for="(val, i) in arr" :key="i" @click="fun(val)" :icon="val.icon"  :class="val.bool? 'active':'' ">{{
        val.text
      }}</van-tabbar-item>
 
  </van-tabbar>
     </div>
</template>
<script>
export default {
  // name: 'HomeView'
  data() {
    return {
     active:'',
      arr: [
        { text: "首页", bool: true, to: '/index/shouye' ,icon:"home-o"},
        { text: "爆爆团", bool: false, to: '/index/tuan',icon:"fire-o" },
        { text: "订单", bool: false, to: '/index/order',icon:"orders-o" },
        { text: "我的", bool: false, to: "/index/mine",icon:"user-o"},
      ],
    };
  },
  methods: {
   
    fun(n){

       let len = this.arr;
         len.forEach(element => {
            element.bool = false;
                  this.$router.push(n.to).catch(err => err);
         });
         n.bool = true
    }
  },
};
</script>

<style scoped>
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  background-color: white;
}
.active {
  color: red;
  font-weight: bold;
}
</style>
